<template>
  <div>
    <div class="grid" style="--gridH: 4rem; --row: 1">
      <div class="i-box">
        <XmolBox title="Xpie" style="--freeH: 100%">
          <Xpie
            v-if="showChart"
            :seriesData="seriesData"></Xpie>
        </XmolBox>

      </div>
      <div class="i-box">
        <XmolBox title="Xpie" style="--freeH: 100%">
          <Xpie
            v-if="showChart"
            :seriesData="seriesData"
            :seriesSet="seriesSet"
            :titleSet="titleSet1"
            :legendSet="{show: false}"
            :seriesLabelSet="seriesLabelSet"
            :seriesLabelLineSet="seriesLabelLineSet"></Xpie>
        </XmolBox>
      </div>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<Xpie :seriesData="seriesData" v-if="showChart"></Xpie>`'></div>
      </div>
      <div>
        <p class="tt">处理指标数据方法</p>
        <p><span class="td">方法名：</span> Common.dealPieData(data)</p>
        <p><span class="td">参数<el-tag size="mini" class="ml5" type="info">data</el-tag> ：</span>通用指标接口返回的data数据</p>
        <p><span class="td">返回数据：</span>[{name: '', value: ''}, …… ] （具体格式参考如下）</p>
        <pre style="font-size: 0.1rem" class="col-white2">
          参考：
          [
            { "name": "仔猪", "value": "2740.0" },
            { "name": "肥猪", "value": "4020.0" },
            { "name": "母猪存栏", "value": "4490.0" },
            { "name": "仔猪存栏", "value": "4120.0" },
            { "name": "肥猪存栏", "value": "4360.0" }
          ]
        </pre>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    let clientWidth = document.documentElement.clientWidth;
    let w = (clientWidth / 1280) * 100 * 0.1;
    let colorConfig = this.$store.state.colorConfig;
    return {
      seriesData: [],
      showChart: false,
      titleSet: {
        top: 'middle',
        left: 'center',
        textStyle: {
          color: colorConfig.fontColor,
          fontWeight: 'normal',
          fontSize: w * 0.8,
          lineHeight: w * 1.1
        }
      },
      titleSet1: {
        top: '45%',
        left: 'center',
        textStyle: {
          color: colorConfig.fontColor,
          fontWeight: 'bold',
          fontSize: w * 1.5,
          lineHeight: w
        },
        text: '8201',
        subtext: '园区产值/万元',
        subtextStyle: {
          color: colorConfig.fontColor2,
          fontWeight: 'normal',
          fontSize: w * 0.9,
          lineHeight: w
        },
        itemGap: w * 0.2
      },
      seriesSet: {
        center: ['50%', '50%']
      },
      seriesLabelSet: {
        formatter: '{a|{c}}\n{s|{b}}',
        rich: {
          a: {
            color: colorConfig.fontColor,
            fontSize: w * 1.1,
            lineHeight: w * 1.5
          },
          s: {
            color: colorConfig.fontColor2,
            fontSize: w * 0.8
          }
        }
      },
      seriesLabelLineSet: {
        normal: {
          length: w * 1,
          length2: w * 0.5,
          lineStyle: {
            width: 1,
            color: colorConfig.fontColor2
          }
        }
      },
      legendSet: {show: false}
    };
  },
  mounted () {
    this.getSeriesData();
  },
  methods: {
    getSeriesData () {
      let res = {'status': {'code': 200, 'msg': '服务请求成功'}, 'data': [{'projectId': 2, 'dt': '2021-11-01', 'indexId': 2, 'indexName': '仔猪', 'value': '2740.0'}, {'projectId': 2, 'dt': '2021-11-01', 'indexId': 3, 'indexName': '肥猪', 'value': '4020.0'}, {'projectId': 2, 'dt': '2021-12-01', 'indexId': 1, 'indexName': '母猪存栏', 'value': '4490.0'}, {'projectId': 2, 'dt': '2021-12-01', 'indexId': 2, 'indexName': '仔猪存栏', 'value': '4120.0'}, {'projectId': 2, 'dt': '2021-12-01', 'indexId': 3, 'indexName': '肥猪存栏', 'value': '4360.0'}]};
      this.seriesData = this.Common.dealPieData(res.data || []);
      this.showChart = true;
    }
  }
};
</script>
